<template>
  <!-- <div> -->
    <!-- <span :class="screenfullBut?'iconfont icon-suofang1':'iconfont icon-suofang'"></span> -->
    <!-- <span class="iconfont icon-suofang1"></span> -->

  <!-- </div> -->
  <!-- <h1 class="Zoom"  @click="fullscreen" >缩放</h1> -->
  <div class="fullBut" @click="fullscreen">
    <span :class="!screenfullBut? 'iconfont icon-suofang1':'iconfont icon-suofang'"></span>
    <!-- <svg-icon :iconClass="!screenfullBut?'map_full-screen':'map_small-screen'" className='ico'></svg-icon> &nbsp;{{!screenfullBut?'全屏':'取消'}} -->
</div>
</template>
<script>
 import screenfull from 'screenfull'
export default {
  components:{
  //  screenfull
  },
  setup() {
    return {screenfull}
  },
    data() {
    return {
      screenfullBut: false, // 全屏按钮
    }
  },
  methods: {
    // 全屏功能
    fullscreen() {
      if (!screenfull.isEnabled) {
        this.$notification.open({
          message: '温馨提示',
          description:
            '您的浏览器无法使用全屏功能，请更换谷歌浏览器或者请手动点击F11按钮全屏展示！',
          duration: 10,
          placement: 'bottomLeft',
        });
        return false
      }
      screenfull.toggle();
      if(screenfull.isFullscreen){
        this.screenfullBut = false;
      }else{
        this.screenfullBut = true;
      }
    },

  }
}
</script>

<style lang="less" scoped>
.iconfont{
  margin: 0 15px;
}
</style>
